<script setup>
import {request} from "@/util/request.js";
import {ref} from "vue";
import {useUserStore} from "@/store/user.js";
import {ElMessage} from "element-plus";

const userStore = useUserStore();
const users = ref([])

request.get('/user/list', {
    headers: {
        'Authorization': userStore.token
    }
}).then(res => {
    users.value = res.data
})

function handleDelete(index, row) {
    console.log(row.id)
    request.get('/user/delete/' + row.id, {
        headers: {
            'Authorization': userStore.token
        }
    }).then(res => {
        if (res.code === 1) {
            ElMessage.success("删除成功")
        } else {
            ElMessage.error(res.msg)
        }
    })
}

const user = ref({})
const dialogVisible = ref(false)

function handleEdit(row) {
    dialogVisible.value = true
    user.value = row
}


function handleClose() {
    ElMessage.info("取消修改")
    dialogVisible.value = false
}

function submitEdit() {
    request.post('/user/edit', JSON.stringify(user.value), {
        headers: {
            'Authorization': userStore.token,
            'Content-type': 'application/json;charset=UTF-8'
        }
    }).then(res => {
        dialogVisible.value = false
        if (res.code === 1) {
            ElMessage.success("修改成功！")
        } else {
            ElMessage.error("修改失败")
        }
    })
}
</script>

<template>
    <el-row>
        <el-col>
            <el-table :data="users" style="width: 100%">
                <el-table-column fixed prop="id" label="编号" width="150"/>
                <el-table-column prop="username" label="用户名" width="120"/>
                <el-table-column prop="phone" label="电话" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column prop="nickname" label="昵称" width="120"/>
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            :active-value="1"
                            :inactive-value="0"
                        ></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="createDate" label="创建时间"/>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                        <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <!--修改信息-->
    <el-dialog
        v-model="dialogVisible"
        title="修改用户信息"
        width="50%"

        :before-close="handleClose">
        <el-form label-width="80px" size="large">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户名">
                        <el-input v-model="user.username"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="user.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="user.email"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="昵称">
                        <el-input v-model="user.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="user.status" class="ml-4">
                            <el-radio label="1" size="large">正常</el-radio>
                            <el-radio label="0" size="large">停用</el-radio>
                        </el-radio-group>
                        <!--<el-option></el-option>-->
                    </el-form-item>
                    <el-form-item label="角色">
                        <!--查询所有角色进行修改-->
                        <!--<el-option></el-option>-->
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">
          确认
        </el-button>
      </span>
        </template>
    </el-dialog>
</template>

<style>
.cell {
    text-align: center;
}
</style>